<template>
  <section>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!--<el-form-item>-->
        <!--<el-input v-model="formInline.user" placeholder="姓名"></el-input>-->
        <!--</el-form-item>-->

      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange">

      <el-table-column label="Attempt" prop="id"></el-table-column>
      <el-table-column label="State" prop="state"></el-table-column>
      <el-table-column label="Sttempt" prop="type"></el-table-column>
      <el-table-column label="Node" prop="nodeHttpAddress"></el-table-column>
      <el-table-column label="Logs" prop="logs">
        <template scope="scope">
          <router-link :to="{ path: `/page3362` ,query:{'nodeId' : `${scope.row.nodeHttpAddress}`,'containerId':`${scope.row.assignedContainerId}`,attemptId:`${scope.row.id}`,user:`${query.user}` }}">logs</router-link>
        </template>
      </el-table-column>
      <el-table-column label="Start Time" prop="startTime">
        <template scope="scope">
          {{scope.row.startTime |toTimeStr}}
        </template>
      </el-table-column>
      <el-table-column label="Finish Time" prop="finishTime">
        <template scope="scope">
          {{scope.row.finishTime |toTimeStr}}
        </template>
      </el-table-column>
      <el-table-column label="Elapsed Time" prop="elapsedTime">
        <template scope="scope">
          {{scope.row.elapsedTime |toTimeStr}}
        </template>
      </el-table-column>
      <el-table-column label="Node" prop="attempt"></el-table-column>
    </el-table>

    <!--分页-->
    <!--<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
      <el-pagination :current-page="1" :page-sizes="[5, 10, 20, 50]" :page-size="20" layout="total, sizes, prev, pager, next, jumper"
                     :total="400" style="float:right">
      </el-pagination>
    </el-col>-->

    <!--编辑界面-->
    <el-dialog :title="formTitle" v-model="logs">
      <pre>
      </pre>
    </el-dialog>
  </section>
</template>

<script>
  import dao from '../../common/dao'

  export default {
    data() {
      return {
        query: {},
        logs: false,
        formInline: {user: ''},
        tableData: []
      }
    },
    methods: {
      getData () {
        this.query = this.$store.state.route.query || {};
        let query = this.query
        let job_id = query.job_id
        let task_id = query.task_id
        dao.getMrJobAttemptTaskAttempt({job_id, task_id}).then(res => {
          if (res.FX.err) return false;
          let results = res.body.results || {}
          this.tableData = results.taskAttempts || [];
        })
      },
      handleSelectionChange: function () {
      },
    },
    mounted: function () {
      this.getData()
    }
  }
</script>

<style scoped>
  .box-card {
    margin-bottom: 10px;
  }

  .one {
    display: inline-block;
    width: 49%;
  }

  .el-card__heade {
    padding: 7px 20px;
  }

</style>